// 自定义插件
import Message from "./Message.vue";

export default {
  // 所有插件提供的安装方法:Vue.use(xxx)
  // Vue是vue实例,options为传入的参数
  install(Vue, options) {
    options;
    // 扩展Vue组件
    const VueMessage = Vue.extend(Message);
    let vm = null;

    // 显示消息框
    const MessageBox = ({ type, message, timer = 2000 }) => {
      if (null == vm) {
        console.log("创建消息插件...");
        // 实例没有创建
        vm = new VueMessage();
        // 挂载区域信息
        vm.$mount();
        document.querySelector("body").append(vm.$el);
      } else {
        console.warn("清除插件定时器...");
        // 实例已经创建
        clearTimeout(MessageBox.timer);
      }
      // 调用method显示插件
      vm.type = type;
      vm.message = message;
      vm.show();
      // n秒后隐藏
      MessageBox.timer = setTimeout(() => {
        vm.hide();
      }, timer);
    };

    // 提取的消息函数
    const func = (type, message, timer = 2000) => {
      MessageBox({
        type,
        message,
        timer,
      });
    };

    // 处理成功显示
    MessageBox.success = func.bind(null, "success");
    // 处理失败显示
    MessageBox.error = func.bind(null, "error");
    // 信息提示显示
    MessageBox.info = func.bind(null, "info");
    // 信息警告显示
    MessageBox.warn = func.bind(null, "warn");
    // 使用方式：
    // 方式一：
    // this.$message({
    //     type: "error",
    //     message: "处理失败!",
    //     timer: 3000
    // });
    // 方式二：
    // this.$message.success("发送成功!", 5000);

    // 赋值给消息原型属性
    Vue.Message = Vue.prototype.$message = MessageBox;
  },
};
